<template>
  <Layout class="p-5 bg-white">
    <Form
      class="p-5"
      :model="paymentOptions"
      :rules="ruleValidate"
      :label-width="155"
    >
      <Row>
        <Col span="8" push="2">
          <FormItem class="w-100" label="分期业务名" prop="name">
            <Input v-model="paymentOptions.name"></Input>
          </FormItem>
          <FormItem class="w-100" label="利息期数" prop="base">
            <Input v-model="paymentOptions.base"></Input>
          </FormItem>
          <FormItem class="w-100" label="本金期数" prop="main">
            <Input v-model="paymentOptions.main"></Input>
          </FormItem>
          <FormItem class="w-100" label="利率" prop="rate">
            <Input v-model="paymentOptions.rate"></Input>
          </FormItem>
          <FormItem class="w-100" label="服务是否上架">
            <i-switch v-model="paymentOptions.status"></i-switch>
          </FormItem>
          <FormItem class="w-100" label="每月还款日" prop="rate">
            <Input v-model="paymentOptions.payDate"></Input>
          </FormItem>
          <FormItem>
            <Button @click="submit" type="primary">提交</Button>
            <Button @click="cancel" style="margin-left: 8px">取消</Button>
          </FormItem>
        </Col>
      </Row>
    </Form>
    <Loadding v-bind:loadinghuan="isSpinShow"></Loadding>
  </Layout>
</template>
<script>
export default {
  data() {
    return {
      isSpinShow: false,
      ruleValidate: {
        name: [
          {
            required: true,
            message: '分期业务名不能为空',
            trigger: 'blur',
            whitespace: true,
          },
        ],
        base: [
          {
            required: true,
            message: '利息期数不能为空',
            trigger: 'blur',
            whitespace: true,
          },
        ],
        main: [
          {
            required: true,
            message: '本金期数不能为空',
            trigger: 'blur',
            whitespace: true,
          },
        ],
        rate: [
          {
            required: true,
            message: '利率不能为空',
            trigger: 'blur',
            whitespace: true,
          },
        ],
        payDate: [
          {
            required: true,
            message: '每月还款日不能为空',
            trigger: 'blur',
            whitespace: true,
          },
        ],
      },
      paymentOptions: {
        name: '',
        base: '',
        main: '',
        rate: '',
        status: '',
        payDate: '',
      },
    }
  },
  methods: {
    cancel: function() {
      this.$tabs.close({ to: '/paymentOptions' })
    },
    submit: function() {
      if (this.$data.paymentOptions.name.trim().length === 0) {
        this.message.error('分期业务名必须输入')
        return
      }
      if (this.$data.paymentOptions.name.indexOf(' ') > -1) {
        this.message.error('分期业务名中不能有空格')
        return
      }
      if (this.$data.paymentOptions.base.trim().length === 0) {
        this.message.error('利息期数必须输入')
        return
      }
      if (this.$data.paymentOptions.base.indexOf(' ') > -1) {
        this.message.error('利息期数中不能有空格')
        return
      }
      if (this.$data.paymentOptions.main.trim().length === 0) {
        this.message.error('本金期数必须输入')
        return
      }
      if (this.$data.paymentOptions.main.indexOf(' ') > -1) {
        this.message.error('本金期数中不能有空格')
        return
      }
      if (this.$data.paymentOptions.rate.trim().length === 0) {
        this.message.error('利率必须输入')
        return
      }
      if (this.$data.paymentOptions.rate.indexOf(' ') > -1) {
        this.message.error('利率中不能有空格')
        return
      }
      if (this.$data.paymentOptions.payDate.trim().length === 0) {
        this.message.error('每月还款日必须输入')
        return
      }
      if (this.$data.paymentOptions.payDate.indexOf(' ') > -1) {
        this.message.error('每月还款日中不能有空格')
        return
      }
      let self = this

      this.isSpinShow = true
      this.http
        .post({
          url: '/paymentOptions',
          param: { paymentOptionStr: this.paymentOptions },
        })
        .then((data) => {
          this.isSpinShow = false
          self.message.info('添加成功')
          this.$tabs.close({ to: '/paymentOptions' })
        })
    },
  },

  created: function() {},
  destroyed: function() {
    this.$router.push({
      name: 'paymentOptions',
    })
  },
}
</script>
<style scoped></style>
